<%# TODO: Consider omitting default site footer for this page %>

<article class="ten">
  <header class="ten-section ten-hero">
    <div class="ten-section-inner">
      <h1 class="ten-hero-logo">
        <%# TODO: Add fallback logo and display based on a "cssmask" Modernizr check %>
        <div class="ten-hero-logo-background"></div>
        <div class="ten-hero-logo-main">
          <%= render("_ten/ten_year_logo.html", assigns) %>
        </div>
      </h1>
      <div class="ten-hero-content">
        <h2 class="ten-hero-intro">Join us in celebrating a decade of conversations, news, and&nbsp;community.</h2>
        <a
          role="button"
          class="ten-hero-button button_large"
          data-play="/backstage/9/play"
          href="https://cdn.changelog.com/uploads/backstage/9/backstage-9.mp3"
          title="Play Episode">Listen to the story</a>
        <p class="ten-hero-fine_print">Or watch Adam and Jerod get interviewed by <br>Quincy Larson on the <a href="https://www.youtube.com/watch?v=0hd0FPd47II" target="_blank" rel="noopener noreferrer">freeCodeCamp podcast</a>.</p>
      </div>
    </div>
  </header>

  <section class="ten-section">
    <div class="ten-section-inner">
      <h2 class="ten-section-heading">By the Numbers</h2>
      <%= render("_ten/ten_stats.html", assigns) %>
    </div>
  </section>

  <section class="ten-section">
    <div class="ten-section-inner">
      <h2 class="ten-section-heading">The Photos</h2>
      <%= render("_ten/ten_gallery.html", assigns) %>
      <div class="ten-section-button">
        <%= link("View Gallery", to: "#", class: "ten-section-button-link js-open_lightbox", role: "button") %>
      </div>
    </div>
  </section>

  <section class="ten-section ten-section--timeline">
    <div class="ten-section-inner">
      <h2 class="ten-section-heading">The Timeline</h2>
      <%= render("_ten/ten_timeline.html", assigns) %>
    </div>
  </section>

  <section class="ten-section">
    <div class="ten-section-inner">
      <h2 class="ten-section-heading">Kind Words</h2>
      <%= render("_ten/ten_testimonials.html", assigns) %>
      <div class="ten-section-button">
        <%= link("Share Yours", to: "https://twitter.com/intent/tweet?text=Happy%20ten%20year%20anniversary%20to%20%40changelog!&url=https%3A%2F%2Fchangelog.com%2Ften", class: "ten-section-button-link", target: "_blank") %>
      </div>
    </div>
  </section>

  <section class="ten-section">
    <div class="ten-section-inner">
      <h2 class="ten-section-heading">Highlighted Episodes</h2>
      <%= render("_ten/ten_episodes.html", assigns) %>
      <div class="ten-section-button">
        <%= link("View All Episodes", to: Routes.podcast_path(@conn, :show, "master"), class: "ten-section-button-link") %>
      </div>
    </div>
  </section>

  <section class="ten-section">
    <div class="ten-section-inner">
      <h2 class="ten-section-heading">Special Thanks</h2>
      <%= render("_ten/ten_thanks.html", assigns) %>
    </div>
  </section>

  <footer class="ten-section ten-footer">
    <div class="ten-section-inner">
      <p class="ten-footer-message">Thanks for joining us in our first ten years. <br>We look forward to the next&nbsp;ten.</p>
      <p class="ten-footer-love"><span class="ten-footer-love-heart"></span>Love,</p>
      <%= link("Changelog", to: "/", class: "ten-footer-logo") %>
    </div>
  </footer>
</article>
